<template>
  <div class="outer" v-if="cityList">
    <my-nav-bar class="nav-bar">
      <span class="left-arrow" slot="left" @click="onClickLeft"
        ><i class="iconfont icon-x"></i
      ></span>
      <div slot="title" class="title">当前城市-{{ $store.state.cityName }}</div>
    </my-nav-bar>
    <van-search
      v-model="value"
      placeholder="输入城市名或拼音"
      action-text="取消"
      :show-action="isShownCancleText"
      class="search"
      shape="round"
      @cancel="onCancel"
      @focus="focus"
      @blur="blur"
    />
    <van-index-bar
      :index-list="letterList"
      :sticky="true"
      v-show="isShowOriginList"
      :sticky-offset-top="100"
      @select="selectItem"
      class="index-content"
      ref="indebar"
    >
      <hot-city :hotCityList="cityList"></hot-city>
      <div v-for="(data, index) in cityList" :key="index">
        <van-index-anchor :index="data.type" class="index-anchor" />
        <van-cell
          :title="city.name"
          v-for="(city, n) in data.cityNameArray"
          :key="n"
          @click="itemClick(city)"
        />
      </div>
    </van-index-bar>
    <div class="search-result">
      <van-list v-if="searchCityList">
        <van-cell
          v-for="(alreadySearch, n) in searchCityList"
          :key="n"
          @click="itemClick(alreadySearch)"
          >{{ alreadySearch.name }}</van-cell
        >
      </van-list>
      <div class="null-data" v-show="isHaveSearchResult">
        <img src="/img/icons/null_data.png" alt="" />
        <p>没有找到匹配的城市</p>
      </div>
    </div>
  </div>
</template>
<script>
import Vue from "vue";
import MyNavBar from "@/components/details/NavBar";
import HotCity from "../cinema/HotCity";
import { Toast, IndexBar, IndexAnchor, Cell, Search, List } from "vant";
import { mapState, mapActions, mapMutations } from "vuex";
Vue.use(IndexBar).use(IndexAnchor).use(Cell).use(Search).use(List);
export default {
  components: {
    MyNavBar,
    HotCity,
  },
  data() {
    return {
      isFirstToastShow: true,
      value: "",
      isShowOriginList: true,
      isShownCancleText: false,
      isHaveSearchResult: false,
    };
  },
  watch: {
    searchCityList(change) {
      if (!change) {
        this.isHaveSearchResult = false;
      } else {
        if (change.length > 0) {
          this.isHaveSearchResult = false;
        } else {
          this.isHaveSearchResult = true;
        }
      }
    },
  },
  computed: {
    ...mapState("CityNameModule", ["letterList", "cityList"]),

    searchCityList() {
      if (this.value == "") {
        return;
      }
      //需要二维数组转一维数组  利用es5的arr.reduce(callback[, initialValue])实现
      this.xiuGai()
      return this.cityList
        .map((item) => item.cityNameArray)
        .reduce((item1, item2) => item1.concat(item2))
        .filter((city) => {
          return (
            city.name.toUpperCase().includes(this.value.toUpperCase()) ||
            city.pinyin.toUpperCase().includes(this.value.toUpperCase())
          );
        });
    },
  },
  methods: {
    ...mapActions("CityNameModule", ["getCityList"]),
    ...mapMutations("CinemaModule", ["setCinemasList"]),
    xiuGai() {
      //no-side-effects-in-computed-properties 为了避免这个问题的野路子
 this.isShowOriginList = false;
    },
    onCancel() {
      this.isShowOriginList = true;
      this.isShownCancleText = false;
    },
    blur() {
      //	输入框失去焦点时触发
      this.isShownCancleText = true;
    },
    focus() {
      //输入框获得焦点时触发
      this.isShownCancleText = true;
    },
    onClickLeft() {
      this.$router.back();
    },
    selectItem(index) {
      if (this.isFirstToastShow) {
        Toast(index);
      }
      this.isFirstToastShow = true;
    },
    itemClick(city) {
      this.setCinemasList([]);
      this.$store.commit("cityName", city.name);
      this.$store.commit("cityId", city.cityId);
      this.$router.back();
    },
    // setData(data) {
    //   let letterArr = [];
    //   let alreadyArr = [];
    //   for (let code = 65; code < 91; code++) {
    //     letterArr.push(String.fromCharCode(code));
    //   }
    //   for (let i = 0; i < letterArr.length; i++) {
    //     let newArray = data.filter((item) => {
    //       return item.pinyin.slice(0, 1).toUpperCase() === letterArr[i];
    //     });
    //     if (newArray.length != 0) {
    //       this.letterList.push(letterArr[i]);
    //       alreadyArr.push({
    //         type: letterArr[i],
    //         cityNameArray: newArray,
    //       });
    //     }
    //   }
    //   return alreadyArr;
    // },
  },
  mounted() {
    this.isFirstToastShow = false;
    // this.$refs.indebar.scrollTo(0);
    this.$store.commit("hideTab");
    if (this.cityList.length === 0) {
      this.getCityList().then(() => {});
    }
    // http({
    //   url: "/gateway?k=1242047",
    //   headers: {
    //     "X-Host": "mall.film-ticket.city.list",
    //   },
    // }).then((res) => {
    //   this.cityList = this.setData(res.data.data.cities);
    // });
  },
  destroyed() {
    this.$store.commit("showTab");
  },
};
</script>
<style lang="less" scoped>
.outer {
  .nav-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }
  .search {
    position: fixed;
    top: 46px;
    left: 0;
    right: 0;
    z-index: 999;
  }
  .search-result {
    margin-top: 100px;
    .null-data {
      text-align: center;
      img {
        width: 90px;
      }
      p {
        color: #bdc0c5;
        font-size: 14px;
        margin: 0;
      }
    }
  }
  .left-arrow {
    i {
      font-size: 30px;
      color: rgb(139, 134, 134);
    }
  }
  .index-content {
    margin-top: 100px;
  }
  .index-anchor {
    background-color: #f4f4f4;
    color: #797d82;
  }
}
</style>